<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>10.Ajax封装</title>
  </head>
  <body>
    <p>Ajax对象XMLHttpRequest的参数有:</p>
    <ol>
      <li>请求方式:get 或 post</li>
      <li>请求URL</li>
      <li>请求的参数：1.get参数 2.post参数</li>
    </ol>
    <p>
      以上的参数作为参数传递给封装的函数,因为参数较多，所以选择对象形式传递参数方便使用
    </p>
    <p>
      其中请求方法又决定了参数传递的方式，如果是GET方法，则直接写在URL后面，如果是POST方式，则需要通过xhr对象的send方法发送，所以必须先判断请求方式
    </p>
  </body>
</html>
<script>
  function Ajax(ajaxOptions) {
    const xhr = new XMLHttpRequest();
    let params = ""; //传递的参数
    // 默认情况下  application/x-www-form-urlencoded  传输方式 name=chj&gender=male
    //处理需要通过URL传递的参数
    // {name:chj,gender:male} 转化为 "name=chj&gender=male&"
    for (let attr in ajaxOptions.data) {
      params += attr + "=" + ajaxOptions.data[attr] + "&";
    }
    // params = "name=chj&gender=male"
    params = params.substr(0, params.length - 1);

    // Content-Type
    let contentType = ajaxOptions.header["Content-Type"];

    // 首先判断是 GET 还是 POST 请求
    if (ajaxOptions.type === "GET") {
      xhr.open(ajaxOptions.type, ajaxOptions.url + "?" + params);
      xhr.send();
    } else if (ajaxOptions.type === "POST") {
      xhr.open(ajaxOptions.type, ajaxOptions.url);
      xhr.setRequestHeader("Content-Type", contentType);
      // 默认是 application/x-www-form-urlencoded
      if (contentType === "application/json") {
        // 只有 application/json 方式传输需要JSON字符串序列化
        params = JSON.stringify(ajaxOptions.data);
      }
      // 否则以默认方式传输
      xhr.send(params);
    } else {
      alert("请求方式不对！");
      return false;
    }
    xhr.onload = function () {
      // console.log(xhr.responseText);

      if (xhr.readyState === 4 && xhr.status === 200) {
        ajaxOptions.success(xhr.responseText);
      } else {
        ajaxOptions.error(xhr.responseText);
      }
    };
  }
  Ajax({
    // 请求类型
    type: "POST",
    // 请求链接
    url: "http://localhost:3000/first",
    // 请求头类型   application/x-www-form-urlencoded  或   application/json
    header: {
      "Content-Type": "application/json",
    },

    // 传递给服务器的参数
    data: {
      name: "chj",
      gender: "male",
    },
    // 请求成功的处理函数，在函数内对响应数据做处理
    success: function (data) {
      //data 是响应数据
      console.log("success " + data);
    },
    error: function (data) {
      //data 是响应数据
      console.log("error " + data);
    },
  });
</script>
